import React, { useState, useEffect } from "react";
import { Segmented, Select } from "antd";
import useModelList from "@/hooks/useModelList";
import useLocalModel from "@/hooks/useLocalModel";
import { invokeAPi } from "@/xz-fn.js";
import { AUTH_LOGIN } from "@/utils/constants";
import showToast from "@/utils/message";
import System from "@/models/system";
import DeepSeek from "@/media/chat/deepseek.png";
import Energy from "@/media/chat/energy.png";
import "./index.css";
export default function AttachItem() {
  const modeData = useModelList();
  const { localModelList, localmodelName } = useLocalModel();
  const isLogin = localStorage.getItem(AUTH_LOGIN);
  const [modelType, setModelType] = useState(1);
  const [modelName, setModelName] = useState();
  const [modelList, setModelList] = useState([]);
  const handleChange = (value) => {
    console.log(`Selected model: ${value}`);
    setModelName(value); // 更新状态变量
    handleSave();
  };
  const changeModelType = async (value) => {
    setModelType(value);
    setModelList([]);
    setModelName("");
    if (value == 2) {
      if (!isLogin) {
        showToast("error", "请登录");
        invokeAPi("xz_ShowUserCenter");
      }
      const modelList =
        modeData.map((item) => ({
          value: item.id,
          label: item.title,
        })) || [];
      setModelList(modelList);
      setModelName(modelList[0]?.value);
    } else if (value == 1) {
      setModelList(localModelList);
      setModelName(localmodelName);
    }
    handleSave();
    console.log("请登录");
  };

  const handleSave = async () => {
    const data = {
      LLMProvider: "ollama",
      OllamaLLMAuthToken: "",
      OllamaLLMBasePath: "http://127.0.0.1:11434",
      OllamaLLMKeepAliveSeconds: "300",
      OllamaLLMModelPref: modelName,
      OllamaLLMPerformanceMode: "base",
      OllamaLLMTokenLimit: "4096",
    };
    const { error } = await System.updateSystem(data);
    if (error) {
      showToast("error", "模型设置失败");
    } else {
      showToast("success", "模型设置成功");
      localStorage.setItem("providerType", modelType);
    }
  };

  useEffect(() => {
    console.log("localModelList", localModelList);
    setModelList(localModelList);
    setModelName(localmodelName);
  }, [localModelList, localmodelName]);

  return (
    <div className="flex items-center ml-[15px]">
      <Segmented
        block
        value={modelType}
        shape="round"
        className="segmente-box rounded-[16px] w-[165px] p-[0]"
        options={[
          { label: "本地模型", value: 1, className: "seg-local" },
          { label: "线上模型", value: 2, className: "line-local" },
        ]}
        onChange={(value) => changeModelType(value)}
      />
      <div className="flex items-center w-[220px] h-[32px] rounded-[16px] select-box relative mx-[12px]">
        <img
          src={DeepSeek}
          alt="DeepSeek"
          className="absolute w-[24px] h-[24px] left-[10px]"
        />
        <Select
          value={modelName}
          onChange={handleChange}
          className="select-div w-full pl-[30px]"
          options={modelList}
        />
      </div>
      <div className="flex items-center rounded-[18px] px-[10px] py-[5px] energy-box">
        <img src={Energy} alt="Energy" className="w-[22px] h-[22px]" />
        <span className="font-semibold">36</span>
      </div>
    </div>
  );
}
